{% extends "layout.html" %}
{% block mainleft %}
    <!-- 引入markdown转html 插件 -->
    <!--引入样式文件-->
    <link rel="stylesheet" href="/public/editor.md-master/css/editormd.preview.css" />

    <!--引入js文件-->
    <script src="/public/editor.md-master/lib/marked.min.js"></script>
    <script src="/public/editor.md-master/lib/prettify.min.js"></script>
    <script src="/public/editor.md-master/lib/raphael.min.js"></script>
    <script src="/public/editor.md-master/lib/underscore.min.js"></script>
    <script src="/public/editor.md-master/lib/sequence-diagram.min.js"></script>
    <script src="/public/editor.md-master/lib/flowchart.min.js"></script>
    <script src="/public/editor.md-master/lib/jquery.flowchart.min.js"></script>
    <script src="/public/editor.md-master/editormd.js"></script>
<div class="mainLeft">
    <div class="listBox">
        <h1>{{content.title}}</h1>
        <p class="colDefault">
            作者：<span class="colInfo">{{content.user.username}}</span> -
            时间：<span class="colInfo">{{content.addTime|date("Y年m月d日 H:i:s", -8*60)}}</span> -
            阅读：<span class="colInfo">{{content.views}}</span> -
            评论：<span class="colInfo">{{content.comments.length}}</span>
        </p>
        <style>
            #content{
                text-align:left;
                text-indent:2em;
            }
        </style>
          <!-- {% autoescape %}{{ content.content}}{% endautoescape %} text转html 暂不用 -->
        <textarea id="demo1" style="width:800px;height:300px;display: none!important">
                {{ content.content}}
        </textarea>   
        
        <div id="testEditorMdview">
            <textarea id="appendTest" style="display:none;"></textarea>
        </div>
        <script>
             $("#testEditorMdview").html('<textarea id="appendTest" style="display:none;"></textarea>');
            var content=$("#demo1").val();//获取需要转换的内容
            $("#appendTest").val(content);//将需要转换的内容加到转换后展示容器的textarea隐藏标签中
             editormd.markdownToHTML("testEditorMdview", {
                htmlDecode: "style,script,iframe", //可以过滤标签解码
                emoji: true,
                taskList:true,
                tex: true,               // 默认不解析
                flowChart:true,         // 默认不解析
                sequenceDiagram:true,  // 默认不解析
            });

        </script>
      
    </div>
    <!-- 评论 -->

    <div class="listBox message">
        <!-- 只有在用户登录的时候 才去显示 -->
        {%if userInfo._id %}
        <h3 class="textLeft"><strong>评论</strong> <span class="em">一共有 <em id="messageCount">0</em> 条评论</span></h3>
        <p class="textLeft clear">
            <textarea id="messageContent"></textarea>
            <input type="hidden" id = "contentId" value = "{{content._id.toString()}}">
            <button id="messageBtn" class="submit">提交</button>
        </p>
        {% else %}
        <p class="bgDanger" style="line-height: 30px;">你还没有登录，请先登录！</p>
        {% endif %}
        <div class="messageList">
            <div class="messageBox">
                <p>还没有留言</p>
            </div>
        </div>
    
        <div class="messageList" style="display: block;">
            {% for comment in content.comments %}
                <div class="messageBox">
                    <p class="name clear"><span class="fl">{{comment.username}}</span><span class="fr">{{comment.postTime | date("Y/m/d H:i:s", -8*60)}}</span></p>
                    <p>{{comment.content}}</p>
                </div>
            {% endfor %}
        </div>
    
    </div>
</div>

{% endblock %}